<?php include __DIR__."/../includes/var_globals.php" ?>
<?php include DIR_ROOT."controller/nueva_transaccion.controller.php" ?>

<!DOCTYPE html>
<html lang="es">
	<head>
		<?php $xajax->printJavascript("../libs/xajax"); ?>
		<title>Transacciones</title>
		<?php include DIR_ROOT."includes/head.php" ?>
		<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
		<script type="text/javascript" src="../js/autoNumeric.js"></script>
		<script type="text/javascript">
		jQuery(function($) {
		    $('#cargo').autoNumeric('init');
		    $('#abono').autoNumeric('init');
		});
		</script>
		<script type="text/javascript">
			$(function() {
			    var cuentasNodo = [
			    
			    <?php 
			    
				    $salida = "";
				    foreach ($cuentas_nodo as $cuenta) {
						$salida .= '{value: "'.$cuenta->codigo.'", label: "'.$cuenta->codigo." - ".$cuenta->nombre.'" },';
					} 
				    echo substr($salida, 0, -1);
			  
			  	?>
			  	
			    ];
			    $( "#nombre_cuenta" ).autocomplete({
			      source: cuentasNodo,
			      select: function (event, ui) {
			      	$( "#nombre_cuenta" ).val( ui.item.label);
			      	$( "#cuenta" ).val( ui.item.value );
			      	
			      	return false;
			      }
			    });
			  });	  
  		</script>
  		<script type="text/javascript">
            $(function() {
                $('#fecha').datepicker(
                	{
                		language: "es",
					    orientation: "top auto",
					    autoclose: true,
					    todayHighlight: true,
					    format: 'yyyy-mm-dd'
                	}
                );
                
                 //Flat red color scheme for iCheck
                $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
                    checkboxClass: 'icheckbox_flat-red',
                    radioClass: 'iradio_flat-red'
                });
                
            });
            
        </script>
	</head>
	<body class="skin-blue fixed">

		<header class="header">
			<?php include DIR_ROOT."includes/header.php" ?>
		</header>
		
		<div class="wrapper row-offcanvas row-offcanvas-left">
			<!-- Lado izquierdo de la página. Menú Lateral -->
			<aside class="left-side sidebar-offcanvas">
                <?php include DIR_ROOT.'includes/menu.php';?>
            </aside>
            
            <!-- Lado derecho y contenido de la página. -->
            <aside class="right-side">
            	<!-- Encabezado del Contenido -->
                <section class="content-header">
                    <h1>
                        Transacciones
                    </h1>
                </section>
                <!-- Contenido Principal -->
                <section class="content">
                	<form id="form-transaccion" name="form-transaccion" method="post" onsubmit="">
                	<div class="row">
                        <div class="col-xs-12">
                            <div class="box">
                                <div class="box-header">
                                    <h3 class="box-title">Nueva Transacción</h3>                                    
                                </div>
                                <!--Se Inicia el Formulario para registrar la nueva transacción-->
                                <div class="box-body">
	                                <!--Cabecera de la  Transacción-->
	                              	<div style="display: inline-block; width: 100%;">
		                                <div>
			                                <label class="col-lg-2 text-right">Período Contable: </label>
			                                <input class="col-lg-1" name="periodoU" id="periodoU" type="text" value="1" disabled />
			                                <input type="hidden" id="periodo" name="periodo" value="1" />
										</div>
										
										<div>
			                               	<label class="col-lg-1 text-right" >Fecha: </label>
			                                <input class="col-lg-2" type="text" name="fecha" id="fecha"/>
			                            </div>
			                            
			                            <div>    
			                                <label class="col-lg-1 text-right">Importe: </label>
			                                <input class="col-lg-1" id="importeU" name="importeU" type="text" value="$0.00" disabled />
			                                <input type="hidden" id="importe" name="importe" value="0" />
		                                </div> <!--Fin de la Cabecera de Transacción-->
		                               
		                                <div>
		                                	<label class="col-lg-1 text-right" >Concepto: </label>
		                                	<input class="col-lg-3" id="concepto" name="concepto" type="text"/>	
		                                </div>
		                           </div>
	                               <!-- /.box-header -->
	                                <div id="div_tabla" class="table-responsive">
	                                    <table id="tablaTransaccion" class="table table-bordered table-hover" style="margin-top: 20px">
	                                        <thead>
	                                            <tr>
	                                                <th>Código Cuenta</th>
	                                                <th>Nombre Cuenta</th>
	                                                <th>Cargar</th>
	                                                <th>Abonar</th>
	                                                <th>+IVA</th>
	                                                <th>Editar</th>
	                                                <th>Eliminar</th>
	                                            </tr>
	                                        </thead>
	                                      	<tfoot>
	                                      		<tr>
		                 							<td colspan="7">
		                 								<button class="btn bg-olive" style="width: 100%" onclick="xajax_buscar_cuenta()" data-target="#buscarCuenta-modal" data-toggle="modal">Agregar Cuenta</button>
		                 							</td>
	                 							</tr>
	                                      	</tfoot>
	                                		<tbody id="columnas">
	                                		<!--Aparece el contenido leido desde la funcion xajax_mostar_tabla-->
	                                		
	                                		</tbody>
	                                    </table>
	                                    </div>
	                                </div><!-- /.box-body -->
	                                
	                                <div class="box-footer text-right">
	                 				   <button id="btnGuardar" type="submit" class="btn btn-primary"><i class="fa fa-save"></i> Guardar</button>
	                    		    </div>
                               </div>
                            </div><!-- /.box -->
                            
                        </div>
                        <input type="hidden" name="accion_transaccion" value="<?php echo INSERTAR ?>" />
                    </form>
                   
                </section>
            </aside>
            
		</div>	
	</body>
</html>

<!--Modal que se mostrará cuando se desee buscar y agregar cuenta-->
<div class="modal fade" id="buscarCuenta-modal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><i class="fa fa-search"></i> Agregar Cuenta</h4>
            </div>
            <form  name="form_modal">
                <div class="modal-body">
                	<div class="row row-form">
                		<label class="col-lg-4 text-right vertical_center" >Cuenta:</label>
                		<div class="col-lg-6">
	                		<input type="text" class="form-control" id="nombre_cuenta" name="nombre_cuenta" placeholder="Digite el nombre de la cuenta">
	                		<input type="hidden" id="cuenta" name="cuenta">
                		</div>
                	</div>
                	
                	<div class="row row-form">
                		<label class="col-lg-4 text-right vertical_center" >Cargar:</label>
                		<div class="col-lg-3">
                			<input id="cargo" data-a-sign="$ " type="text" class="form-control" placeholder="$0.00" />
                		</div>
                	</div>
                	
                	<div class="row row-form">
                		<label class="col-lg-4 text-right vertical_center" >Abonar:</label>
                		<div class="col-lg-3">
                			<input id="abono" data-a-sign="$ " type="text" class="form-control" placeholder="$0.00" />
                		</div>
                	</div>
                    
                    <div class="row row-form">
	                    <label class="col-lg-4 text-right vertical_center" >IVA:</label>
	                    <div class="col-lg-1">
                        	<input type="checkbox" class="flat-red" checked/>
                        </div>
                    </div>              
                    <div class="modal-footer clearfix">
                    <button id="btnAgregar" type="button" class="btn btn-primary"  onclick="xajax_mostrar_tabla(document.form_modal.cuenta.value, document.form_modal.cargo.value, document.form_modal.abono.value);"  data-dismiss="modal"><i class=""></i> Agregar</button>
                    <button type="button" class="btn btn-danger pull-left" data-dismiss="modal"><i class="fa fa-times"></i> Cancelar</button>
                </div>
                </div>
           </form>
                
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
